<template>
  <div v-if="tagHerf" class="content">
    <div class="head">
      <router-link class="label" 
        :to="{path: tagHerf, query: {id: post.label[1]}}">
        <div>{{post.label[0]}}</div>
      </router-link>
      <div class="time">{{post.time}}</div>
    </div>
    <div class="title">{{post.title}}</div>
    <div class="paragraph" v-for="paragraph in post.paragraph" :key="paragraph.id">
      {{ paragraph }}
    </div>
  </div>
</template>

<script>
import Axios from 'axios'

export default {
  name: "Post",
  props: {
    post: Object
  },
  data() {
    return {
      tagHerf: "",
      pageHerf: ""
    }
  },
  watch: {
    post: function (newVal, oldVal) {
      this.post = newVal
      this.tagHerf = "/tags/"
    }
  },
}
</script>

<style lang="stylus" scoped>
.content{
  font-family: Segoe UI, "PingFang SC"
  padding-bottom 50px
  .head{
    font-size 12px
    color #797979
    letter-spacing 1px
    font-weight 500
    display flex
    margin-top 40px
    justify-content center
    text-transform uppercase
    .label{
      margin-right 20px
      border-bottom 1px solid
      padding-bottom 2px
      text-decoration none
      color #797979
      transform .3s
      &:hover{
        color #000
      }
    }
  }
  .title{
    font-size 20px
    letter-spacing 2px
    text-align center
    margin 20px 0 30px 0
  }
  .paragraph{
    margin 14px 0px
    font-size 14px
    color #484848
    line-height 28px
    font-family Segoe UI, "PingFang SC"
  }
}
</style>